<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-action.html">
<link rel="import" href="../common/cr-button.html">
<link rel="import" href="../common/cr-date.html">
<link rel="import" href="../common/cr-toolbar.html">
<link rel="import" href="../common/cr-keyboard.html">
<link rel="import" href="../linkify/cr-linkified-text.html">

<polymer-element name="cr-diff-message" attributes="message expanded">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <style>
            :host {
                display: block;
            }

            .message-edit {
                margin: 0.5em 16px 0 16px;
            }

            .message-text {
                padding: 0.5em 16px;
            }

            .message-header {
                padding: 0.5em 16px;
                display: -webkit-flex;
                display: flex;
            }

            .message-title {
                flex: 1;
                -webkit-flex: 1;
                display: -webkit-flex;
                display: flex;
            }

            .message-author {
                flex-shrink: 0;
                -webkit-flex-shrink: 0;
                font-weight: bold;
            }
        </style>

        <div class="message-header">
            <div class="message-title">
                <div class="message-author" title="{{ message.author.email }}">
                    <template if="{{ message.draft }}">
                        (Draft)
                    </template>
                    {{ message.author.displayName }}
                </div>
            </div>
            <div class="message-date">
                <cr-date date="{{ message.date }}" relative></cr-date>
            </div>
        </div>
        <template if="{{ !expanded }}">
            <div class="message-text">
                <cr-linkified-text text="{{ message.text }}" pre></cr-linkified-text>
            </div>
        </template>
    </template>
    <script>
        Polymer({
            created: function() {
                this.message = null;
                this.expanded = false;
                this.saving = false;
                this.text = "";
            },
            attached: function() {
                if (!this.message.date)
                    this.expand();
            },
            expand: function() {
                if (this.expanded)
                    return;
                this.text = this.message.text;
                this.expanded = true;
                this.saving = false;
            },
            expandedChanged: function() {
                this.async(this.focusInput);
            },
            focusInput: function() {
                if (!this.expanded)
                    return;
                this.scrollIntoViewIfNeeded();
                var textarea = this.shadowRoot.getElementById("textarea");
                if (textarea)
                    textarea.focus();
            },
        });
    </script>
</polymer-element>
